import React from 'react'
import Menu from '@/views/Menu'
import '@/assets/css/CouponInfo.scoped.css'

const Component = () =>
{
    let cid = React.

  return (
    <>
      <React.UI.AutoCenter>
        <React.UI.Image src={require('@/assets/images/coupon.png')} width={'100%'} fit='fill' />
      </React.UI.AutoCenter>

      {/* 领取列表 */}
      <React.UI.Swiper
        autoplay={true}
        autoplayInterval={3000}
        loop={true}
        indicator={() => false}
        direction='vertical' 
        style={{ '--height': '40px', 'border':'0px' }}
      >
        <React.UI.Swiper.Item>
          <React.UI.NoticeBar style={{'border':'0px'}} content={`用户：张三 在 2024-07-10 领取了优惠券`} color='info' />
        </React.UI.Swiper.Item>
        <React.UI.Swiper.Item>
          <React.UI.NoticeBar style={{'border':'0px'}} content={`用户：李四 在 2024-07-11 领取了优惠券`} color='info' />
        </React.UI.Swiper.Item>
      </React.UI.Swiper>

      {/* 优惠券 */}
      <div className='coupon_detail'>
        <div className='coupon_info'>
          <div className="left">
              <div className="left_top">
                  <div><span>75</span>折</div>
                  <div className="top_info">
                      <div>优惠券</div>
                      <div>COUPON</div>
                  </div>
              </div>
          </div>
          <div className="receive">
              <React.UI.Button size="small" color='primary'>立即领取</React.UI.Button>
          </div>
        </div>
        <div className="coupon_prompt">
          <div className="prompt_title">温馨提示：</div>
          <div>
              <span>•</span>
              领取后 2024-07-01 至 2024-07-30 有效
          </div>
          <div><span>•</span>仅限量18张，赶快领取！</div>
        </div>
      </div>

      <Menu />
    </>
  )
}

export default Component